// import { Button } from 'element-ui'
// 基本的表格组件
// 普通表格
export const showtable = (editor) => {
    const {
        Components
    } = editor;
    Components.addType('showtable', {
        model: {
            defaults: {
                tagName: 'div', // 标签名
                name: 'showtable',
                draggable: true,
                attributes: {
                    class: 'middle-table-container'
                },
                components: [{
                    tagName: 'table',
                    droppable: false,
                    attributes: {
                        class: 'middle-table'
                    },
                    components: [{
                            tagName: 'thead',
                            droppable: false,
                            attributes: {
                                class: 'middle-table-header'
                            },
                            components: [{
                                tagName: 'tr',
                                droppable: false,
                                components: [{
                                        tagName: 'th',
                                        droppable: false,
                                        attributes: {
                                            id: 'module-name',
                                        },
                                        components: [{
                                            type: 'text',
                                            droppable: false,
                                            content: '模块'
                                        }]
                                    },
                                    {
                                        tagName: 'th',
                                        droppable: false,
                                        attributes: {
                                            id: 'price',
                                        },
                                        components: [{
                                            type: 'text',
                                            droppable: false,
                                            content: '价格'
                                        }],
                                    }
                                ]
                            }]
                        },
                        {
                            tagName: 'tbody',
                            attributes: {
                                class: 'middle-table-body',
                            },
                            droppable: false,
                            components: [
                                {
                                tagName: 'tr',
                                droppable: false,
                                components: [
                                    {
                                    tagName: 'td',
                                    droppable: false,
                                    components: [{
                                        type: 'text',
                                        droppable: false,
                                        content: '一线城市（包括北上广深）'
                                    },
                                    {
                                        type: 'text',
                                        droppable: false,
                                        content: '准一线和省会城市'
                                    },
                                    {
                                        type: 'text',
                                        droppable: false,
                                        content: '其他城市（地级市和县级市）'
                                    },
                                    {
                                        type: 'text',
                                        droppable: false,
                                        content: '线上（不区分）'
                                    },
                                ]
                                },
                                 {
                                    tagName: 'td',
                                    droppable: false,

                                    components: [
                                        {
                                            type: 'text',
                                            droppable: false,
                                            content: '¥2,5000'
                                        },
                                        {
                                            type: 'text',
                                            droppable: false,
                                            content: '¥2,000'
                                        },
                                        {
                                            type: 'text',
                                            droppable: false,
                                            content: '¥1,5000'
                                        },
                                        {
                                            type: 'text',
                                            droppable: false,
                                            content: '¥1,0000'
                                        }
                                    ],

                                },
                                
                            ]
                            },
                            
                        ]
                        }

                    ]

                }],


                traits: [],
                script() {

                },
                styles: `
      .middle-table-container {
            width: 100%;
            margin: 0 auto;
            padding: 20px;
        }


       .middle-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }


       .middle-table-header {
            background-color: rgb(246, 247, 249);
        }

       .mddle-table-header tr{
        display: flex;
        }
       .middle-table-header tr th {
            text-align: left;
            flex: 1;
            margin-left: 10px;
            padding: 10px;
            font-size: 12px;
            color: rgb(67, 67, 67);
            border: 2px solid rgb(229, 231, 233);
        }



       .middle-table tbody tr:nth-child(even) {
            background-color: #f2f2f2;
            display: flex;
        }


       .middle-table tbody td {
            text-align: left;
            margin-left: 10px;
            padding: 10px;
            flex: 1;
            font-size: 12px;
            color: rgb(67, 67, 67);
            padding: 10px;
            border: 2px solid rgb(229, 231, 233);
        }
        .middle-table .middle-table-body tr td:nth-child(2n){
            color:rgb(254, 130, 82) ;
        }
                `
            },
            init() {},
        }
    });

    // 注册组件
    editor.BlockManager.add('showtable', {
        label: '普通表格',
        category: '其他类',
        media: '<svg t="1723608112806" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4275" width="30" height="30"><path d="M885.3 957.3H140.7c-42.2 0-76.5-34.3-76.5-76.5V136.3c0-42.2 34.3-76.5 76.5-76.5h744.6c42.2 0 76.5 34.3 76.5 76.5v744.6c-0.1 42.1-34.3 76.4-76.5 76.4z m-744.6-851c-16.5 0-29.9 13.4-29.9 29.9v744.6c0 16.5 13.4 29.9 29.9 29.9h744.6c16.5 0 29.9-13.4 29.9-29.9V136.3c0-16.5-13.4-29.9-29.9-29.9H140.7z" fill="#7D7D7D" p-id="4276"></path><path d="M938.5 315.8h-851V91.1c0-4.4 3.6-8 8-8h835c4.4 0 8 3.6 8 8v224.7z"  p-id="4277"></path><path d="M961.7 339H64.3V136.3c0-42.2 34.3-76.5 76.5-76.5h744.6c42.2 0 76.5 34.3 76.5 76.5V339z m-850.9-46.5h804.4V136.3c0-16.5-13.4-29.9-29.9-29.9H140.7c-16.5 0-29.9 13.4-29.9 29.9v156.2zM938.5 644.8h-851c-12.9 0-23.3-10.4-23.3-23.3 0-12.8 10.4-23.3 23.3-23.3h851c12.9 0 23.3 10.4 23.3 23.3-0.1 12.9-10.5 23.3-23.3 23.3z" fill="#7D7D7D" p-id="4278"></path><path d="M363.4 957.3c-12.9 0-23.3-10.4-23.3-23.3V315.8c0-12.8 10.4-23.3 23.3-23.3s23.3 10.4 23.3 23.3V934c0 12.9-10.4 23.3-23.3 23.3zM662.6 957.3c-12.9 0-23.3-10.4-23.3-23.3V315.8c0-12.8 10.4-23.3 23.3-23.3s23.3 10.4 23.3 23.3V934c0 12.9-10.5 23.3-23.3 23.3z"  p-id="4279"></path></svg>',
        content: {
            type: 'showtable'
        },
    });
};